<template>
    <div class="form-container">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item :required="true" prop="deb_name" label="应用名称" class="name-input">
                <el-input v-model="form.deb_name" placeholder="这里写在商店展示的名字～"></el-input>
            </el-form-item>

            <div class="logo-upload">
                <el-upload
                    ref="logo"
                    class="avatar-uploader"
                    action
                    :file-list="logoList"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload"
                    :on-change="handleAvatarChange"
                    :auto-upload="false"
                >
                    <img v-if="logoUrl" :src="logoUrl" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <el-row type="flex" justify="center">
                    <span>上传图标</span>
                </el-row>
            </div>

            <el-form-item :required="true" prop="package_name"  label="应用包名" class="package-input">
                <el-input
                    v-model="form.package_name"
                    placeholder="这里是软件包的名字~（比如krita，vscode，dde-dock这样啦）"
                ></el-input>
            </el-form-item>

            <el-form-item :required="true" prop="version"  label="应用版本" class="version-input">
                <el-input v-model="form.version" placeholder="这里要填上版本哦～"></el-input>
            </el-form-item>
            <el-form-item label="应用作者" prop="author"  class="author-input">
                <el-input v-model="form.author" placeholder="这里是原作者的名字哦～"></el-input>
            </el-form-item>
            <el-form-item label="打包者" prop="uploader"  class="uploader-input">
                <el-input v-model="form.uploader" placeholder="这里写你的名字～"></el-input>
            </el-form-item>
            <el-form-item label="应用网址" prop="website"  class="website-input">
                <el-input v-model="form.website" placeholder="这里写原作者的主页或者官网～"></el-input>
            </el-form-item>
            <el-form-item :required="true" prop="category_id"  label="应用类别" class="category-input">
                <el-select v-model="form.category_id" placeholder="请选择分类">
                    <el-option v-for="c in categorys" :key="c.id" :label="c.display" :value="c.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :required="true" prop="desc"  label="应用简介" class="desc-input">
                <el-input
                    type="textarea"
                    :rows="4"
                    v-model="form.desc"
                    placeholder="写点什么向大家介绍一下这个应用软件吧～"
                ></el-input>
            </el-form-item>
            <el-form-item label="应用截图" class="screenshots-input">
                <el-upload
                    ref="screenshots_upload"
                    :name="screenshots.inputName"
                    :action="screenshotsAPI"
                    :auto-upload="false"
                    :file-list="screenshotsList"
                    list-type="picture-card"
                    :on-change="handleScreenshotsChange"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :data="{'deb_id':deb_id}"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="screenshots.dialogVisible">
                    <img width="100%" :src="screenshots.dialogImageUrl" alt />
                </el-dialog>
            </el-form-item>

            <el-form-item class="button-input">
                <el-button type="primary" @click="gotoDebPage">下一页</el-button>
            </el-form-item>
            <el-form-item class="exit-input">
                <el-button type="primary" @click="exitCommit">算了算了</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
const lrz = require("lrz");
import { SCREENSHOTS_API, commitDebInfo } from "../util/myRequests";
export default {
    name: "commitComponent",
    props: [],
    data() {
        return {
            deb_id: 0,
            // screenshotsAPI:"",
            screenshots: {
                dialogImageUrl: "",
                dialogVisible: false,
                api: "",
                inputName: "screen_shots",
            },
            rules: {
                deb_name: [
                    {
                        required: true,
                        message: "请包含此字段",
                        trigger: "change",
                    },
                ],
                package_name: [
                    {
                        required: true,
                        message: "请包含此字段",
                        trigger: "change",
                    },
                ],
                version: [
                    {
                        required: true,
                        message: "请包含此字段",
                        trigger: "change",
                    },
                ],
                author: [
                    {
                        required: true,
                        message: "请包含此字段",
                        trigger: "change",
                    },
                ],
                uploader: [
                    {
                        required: true,
                        message: "请包含此字段",
                        trigger: "change",
                    },
                ],
                website: [
                    {
                        required: true,
                        message: "请包含此字段",
                        trigger: "change",
                    },
                ],
                category_id: [
                    {
                        required: true,
                        message: "请包含此字段",
                        trigger: "change",
                    },
                ],
                desc: [
                    {
                        required: true,
                        message: "请包含此字段",
                        trigger: "change",
                    },
                ],
            },
        };
    },
    computed: {
        categorys() {
            return this.$store.state.categoryList;
        },
        form() {
            return this.$store.state.commitForm;
        },
        screenshotsList() {
            return this.$store.state.screenshotsList;
        },
        logoList() {
            return this.$store.state.logoList;
        },
        logoUrl() {
            return this.$store.state.logoUrl;
        },
        screenshotsAPI() {
            var id = this.deb_id;
            return `${SCREENSHOTS_API}/${id}`;
        },
    },
    mounted() {},
    methods: {
        beforeAvatarUpload(file) {
            console.log(file);
        },
        handleAvatarChange(file, fileList) {
            this.$store.commit("setImageUrl", URL.createObjectURL(file.raw));
            setTimeout(() => {
                this.file2Base64(
                    this.logoUrl,
                    (base64) => {
                        this.form.logo = base64;
                    },
                    (error) => {
                        console.log(error);
                    }
                );
            }, 500);
        },
        file2Base64(imageUrl, resolve, reject) {
            lrz(imageUrl, {
                quality: 0.7,
            })
                .then((rst) => resolve(rst.base64))
                .catch((error) => reject(error));
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.screenshots.dialogImageUrl = file.url;
            this.screenshots.dialogVisible = true;
        },
        handleScreenshotsChange(file, fileList) {
            var picNameList = [];
            for (let index = 0; index < fileList.length; index++) {
                const element = fileList[index];
                picNameList.push(element.name);
            }
            this.form.screen_shots = JSON.stringify(picNameList);
        },
        gotoDebPage() {
            this.$refs["form"].validate((valid) => {
                if (valid) {

                    commitDebInfo(this.$store.state.commitForm)
                        .then((res) => {
                            this.deb_id = res["deb_id"];
                            // this.screenshotsAPI = SCREENSHOTS_API + "/" + res["deb_id"];
                            setTimeout(() => {
                                console.log(this.deb_id);
                                console.log(
                                    this.$refs.screenshots_upload.action
                                );
                                this.$refs.screenshots_upload.submit();
                                this.$emit("gotoDebPage", res["deb_id"]);
                            }, 1000);
                        })
                        .catch((error) => {
                            console.log(error);
                        });

                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        exitCommit() {
            this.$store.commit("clearCommitForm");
            this.$emit("exitCommit");
        },
        beforeRouteLeave(to, from, next) {
            this.$store.commit("clearCommitForm");
        },
    },
};
</script>

<style>
.form-container {
    margin: 24px;
}
.form-container .el-form {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(13, minmax(10px, 60px));
    justify-items: left;
}
.form-container .el-form-item {
    margin-bottom: 4px !important;
}
.name-input {
    grid-row-start: 1;
    grid-column-start: span 2;
    width: 70%;
    /* min-width: 200px; */
}
.package-input {
    grid-row-start: 2;
    grid-column-start: span 2;
    width: 100%;
}
.version-input {
    grid-row-start: 3;
    grid-column-start: span 2;
    width: 70%;
}
.author-input {
    grid-row-start: 4;
    grid-column-start: span 2;
    width: 70%;
}
.uploader-input {
    grid-row-start: 5;
    grid-column-start: span 2;
    width: 70%;
}
.website-input {
    grid-row-start: 6;
    grid-column-start: span 2;
    width: 90%;
}
.category-input {
    grid-row-start: 7;
    grid-column-start: span 2;
    width: 100%;
}
.desc-input {
    grid-row-start: span 2;
    grid-column-start: span 3;
    width: 100%;
}
.screenshots-input {
    /* grid-row-start: 9; */
    grid-row-start: span 3;
    grid-column-start: span 3;
    width: 100%;
}

/* .screenshots-input .el-upload--picture-card {
    height: 80%;
} */

.button-input {
    grid-row-start: 13;
}
.exit-input {
    grid-column-start: 2;
}
.logo-upload {
    grid-column-start: 0;
    grid-row-start: span 3;
    justify-self: center;
    /* align-self: end; */
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>